<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>背景属性</title>
		<style>
			bo dy{
				width: 100%;
				height: 10000000px;
				background-image: url(img/蜡笔小新侧脸坏笑可爱_爱给网_aigei_com.png);
				background-size:cover;
				/* 函数  cover  等比例图片     特点：原图按照比例放大存背景空间
				           【开发者：背景图大小是否等于背景空间】
				        contian 等比例缩放图片 特点：图片按照比例缩放存背景空间
						    【开发者：背景图等比例显示在背景空间】
						*/
					   /* 背景附件--尺寸中存在cover或者contain */
				       background-attachment: fixed;  /* 背景图固定   scroll 滚动 不固定*/
			}
			div{
				width: 300px;
				height: 300px;
				background-color: #e4393c;
				background: #ffff7f;
				background-image: url(img/蜡笔小新侧脸坏笑可爱_爱给网_aigei_com.png);
				/* 问题：超大图-不显示   小图-显示 
				 注意：背景空间大小，如果图小于背景空间---平铺
				 */
				background-repeat:no-repeat;
				 /* 不平铺  repeat-x，y 横，纵向平铺 */
				background-size: 30%;
				/* 背景尺寸属性值:数值px % | 函数 cover contain */
				/* 背景定位：前提背景空间大于背景图 关键字：center、left、right、top。。。 */
				background-position: 80% 0;
			}
		</style>
	</head>
	<body>
		Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eligendi eaque nisi voluptas hic laboriosam autem, sit aliquid recusandae, minima eos, ipsa repudiandae ratione soluta aperiam. Voluptatibus facilis modi iure ea.
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur dignissimos est eligendi possimus ipsa accusantium nisi assumenda perspiciatis veniam sit a at incidunt repudiandae dicta adipisci magni itaque, cupiditate maiores.
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non nesciunt eum velit assumenda nostrum eveniet suscipit animi, maxime inventore eius? Ut quam minus libero corrupti facere aliquid nobis omnis inventore.
		<!-- html img图片 引入一张图片 ， 位置不可随意改变 
		     css    图片 引入一张图片 ， 位置可以随意改变
			 子属性 background-color  背景颜色
			        background-image 背景图
					background-repeat 背景重复
					background-size  背景尺寸
					background-attachment 背景附件
					background-position   背景定位
		     复合属性 background：background-image background-position
			                       background-size background-repeat和background-attachment 
								   
			简写属性background：background-image background-position|background-size
			替代子属性 	background-image   background-color  background-repeat				   
		-->
		<div></div>
	</body>
</html>